<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-06-22 17:28:55
 * @LastEditTime: 2024-03-16 16:16:26
 * @FilePath: \client\src\components\alter.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<transition
		enter-active-class="animate__animated animate__fadeInDown"
		leave-active-class="animate__animated animate__fadeOutUp"
		@after-leave="handleAfterLeave"
	>
		<div :class="type" v-if="show">
			{{ text }}
		</div>
	</transition>
</template>
<script setup>
	import { onMounted, ref } from 'vue'
	const show = ref(false)
	const timer = ref(null)
	const props = defineProps({
		text: {
			type: String,
			default: '什么消息也没有',
		},
		type: {
			type: String,
			default: 'default',
		},
		parentEl: {},
	})

	const alertHeight = 36

	const handleAfterLeave = () => {
		props.parentEl.remove()
		const mcEles = document.querySelectorAll('.mc')
		for (let i = 0; i < mcEles.length; i++) {
			const ele = mcEles[i]
			let top = i * (alertHeight + 10)
			ele.style.top = `${top}px`
		}
	}

	const close = () => {
		timer.value = setTimeout(() => {
			clearTimeout(timer.value)
			show.value = false
		}, 2000)
	}

	onMounted(() => {
		const mcEles = document.querySelectorAll('.mc')
		let top = (mcEles.length - 1) * (alertHeight + 10)
		props.parentEl.style.top = `${top}px`
		props.parentEl.onmouseenter = () => {
			clearTimeout(timer.value)
		}
		props.parentEl.onmouseleave = close
		show.value = true
		close()
	})
</script>
